<template>
    <div class="loginbg">
     
      <el-row :gutter="20" style="padding-top: 8%;">
    <el-col :span="8" :offset="'2'-0">
      <div class="block">
      <span style="padding-left: 30%; font-family: 'ZCOOLKuaiLe-Regular';font-size: 25px;">生活点滴不被遗落</span>
      <el-carousel height="400px">
        <el-carousel-item v-for="item in urls" :key="item">
          <el-image :src="item" ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    </el-col>
    <el-col :span="10" style="background-color: #ffff; height: 400px; padding-top: 5%;" :offset="'3'-0">
      
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <h1 class="login">注  册</h1>
        <el-form-item label="邮箱" prop="email">
      <el-input type="text" v-model="ruleForm.email" autocomplete="off" placeholder="请输入邮箱" suffix-icon="el-icon-user"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="pass">
      <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码" suffix-icon="el-icon-lock" show-password></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请再次输入密码" suffix-icon="el-icon-lock" show-password></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="yanzhengma">
      <el-input type="password" v-model="ruleForm.yanzhengma" autocomplete="off" placeholder="请输入验证码" suffix-icon="el-icon-mobile"></el-input>
      <el-link type="primary" :underline="false" style="font-family: 'ZCOOLKuaiLe-Regular'" :plain="true" @click="sendCode" :disabled="disabled">发送验证码(10s冷却时间)</el-link>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')" :plain="true">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button><br>
    </el-form-item>
  
  </el-form>
    </el-col>
  </el-row>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
    export default {
      data() {  
        var checkEmail = (rule,value,cb) => {
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        if(regEmail.test(value)){
          //合法的邮箱
          return cb();
        }
        //邮箱不合法
        cb(new Error('请输入合法的邮箱！'));
	};
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.pass) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return {
          ruleForm: {
            pass: '',
            checkPass: '',
            age: '',
            email:'',
            yanzhengma:'',
            code:'',
            
          },
          alter:'error',
          disabled:false,
          rules: {
            pass: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            ],
            checkPass: [
              { validator: validatePass, trigger: 'blur',required: true }
            ],
            email: [
              { validator: checkEmail, trigger: 'blur',required: true }
            ],
            yanzhengma: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            ]
          },
          urls:[
            require("../assets/pc/lunbo1.jpg"),
            require("../assets/pc/lunbo2.jpg"),
            require("../assets/pc/lunbo3.jpg"),
            require("../assets/pc/lunbo4.png"),
          ],
        };
      },
      methods: {
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              axios.post(`/api/register?email=${this.ruleForm.email}&password=${this.ruleForm.pass}&code=${this.ruleForm.yanzhengma}`).then(
                response=>{
                if(response.data.code=== 200){
                    this.$message({
                    message: "注册"+response.data.message+"返回登录",
                    type: 'success'
                    });                    
                this.$router.push('/login')
                }
                else{
                    this.$message.error("注册失败，"+response.data.message);
                    }
                  },
                  error=>{
                    this.$message.error("注册失败,"+error.message);
                  }
              )
            
          } else {
            this.$message.error("提交出错了");
          }

        });
      },                         
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        sendCode(){
          if(this.ruleForm.email===''){
            this.disabled = true
            this.$message.error("请输入邮箱哦!")
            setTimeout(()=>{
                this.disabled = false
            },10000)           
          }else{
            this.disabled = true
            axios.post(`/api/sendemailRe?email=${this.ruleForm.email}`).then(
            response=>{
              if(response.data.code=== 200){              
                this.ruleForm.code=response.data.data
                this.$message({
                message: "发送验证码"+response.data.message+"!请在3分钟内提交哦",
                type: 'success'
              })       
      }else{
        this.$message.error(response.data.message);
              }
            },
            error=>{
             this.$message.error(error.message);
            }
          )
          setTimeout(()=>{
                this.disabled = false
            },10000)
          }
        }
      }
    }
  </script>
  
  <style>
  .loginbg{
    background:linear-gradient(rgb(239, 244, 255) 0%, rgba(255, 255, 255, 0) 100%);
  }
  .login{
    padding-bottom: 5px;
    padding-left: 50%;
    font-family: 'ZCOOLKuaiLe-Regular';
    font-size: 40px;
  }
  .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }
  </style>